<!DOCTYPE html>
<!-- saved from url=(0121)http://www.17sucai.com/preview/271617/2016-10-11/%E6%9C%80%E6%96%B0%E5%AE%89%E5%BE%BD%E5%9C%B0%E5%9B%BEecharts/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>安徽省</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./echarts.js"></script>
<script src="./jquery.min.js"></script>
<script data-require-id="echarts/chart/map"  src="./map.js" async="true"></script>
</head>
<body class="jd">
<style>
    .main-table tr td{padding:3px;}
	.main-table .red{color: #fff2f9;}
</style>
  <div class="y-span10 y-last">
    <div class="table">
        <div class="bj_nav y-clearfix">
			<div style="border:1px solid #ddd;height:750px;">
           <div id="main" style="height: 700px; width: 50%; margin: 0px 15px; float: left; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;" _echarts_instance_="1503998374514"><div style="position: relative; overflow: hidden; width: 703px; height: 700px;"><div data-zr-dom-id="bg" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 703px; height: 700px; user-select: none;"></div><canvas width="703" height="700" data-zr-dom-id="0" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 703px; height: 700px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="703" height="700" data-zr-dom-id="1" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 703px; height: 700px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="703" height="700" data-zr-dom-id="10" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 703px; height: 700px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="703" height="700" data-zr-dom-id="_zrender_hover_" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 703px; height: 700px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><div class="echarts-tooltip zr-element" style="position: absolute; display: none; border-style: solid; white-space: nowrap; transition: left 0.4s, top 0.4s; background-color: rgba(0, 0, 0, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); padding: 5px; left: 495px; top: 510px;">undefined</div></div></div>
			</div>
        </div>
    </div>
  </div>


<script type="text/javascript">
 require.config({
            paths: {
                echarts: 'js/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' 
            ],
			 function (ec) {
			  require('echarts/util/mapData/params').params.anhui = {
			  
        			getGeoJson: function (callback) {
           				 $.getJSON('geoJson/anhui.json', function (data) {
               			 // 压缩后的地图数据必须使用 decode 函数转换
                		callback(require('echarts/util/mapData/params').decode(data));
            			});
       				 }
    			}
			 	var myChart = ec.init(document.getElementById('main')); 
      			var ecConfig = require('echarts/config');
				var zrEvent = require('zrender/tool/event');
				var curIndx = 0;
                 var mapType =["安徽"];


				myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){});
				option = {
					
					tooltip : {
						trigger: 'item',
						//formatter:'dede{b}'
						formatter:function(param){
						}
					},
					legend: {
						orient: 'vertical',
						x:'',
						data:[' ']
					},
					dataRange: {
						min: 0,
						max: 1000,
						color:['#c31a27','#60d06c'],
						text:['高','低'],           // 文本，默认为数值文本
						calculable : true,
                       
					},
					series : [
						{name: '',
							type: 'map',
							mapType: 'anhui',
							selectedMode : false,
							itemStyle:{
								 normal:{label:{show:true},
                   				 borderColor:'rgba(255,255,255,255)',
                    			 borderWidth:2
                			},
								emphasis:{label:{show:true}}
							},
							data:[
								{ name: '六安市', value: Math.round(Math.random() * 500) },
									{ name: '安庆市', value: Math.round(Math.random() * 500) },
									{ name: '滁州市', value: Math.round(Math.random() * 500) },
									{ name: '宣城市', value: Math.round(Math.random() * 500) },
									{ name: '阜阳市', value: Math.round(Math.random() * 500) },
									{ name: '宿州市', value: Math.round(Math.random() * 500) },
									{ name: '黄山市', value: Math.round(Math.random() * 500) },
									{ name: '亳州市', value: Math.round(Math.random() * 500) },
									{ name: '池州市', value: Math.round(Math.random() * 500) },
									{ name: '合肥市', value: Math.round(Math.random() * 500) },
									{ name: '蚌埠市', value: Math.round(Math.random() * 500) },
									{ name: '芜湖市', value: Math.round(Math.random() * 500) },
									{ name: '淮北市', value: Math.round(Math.random() * 500) },
									{ name: '淮南市', value: Math.round(Math.random() * 500) },
									{ name: '马鞍山市', value: Math.round(Math.random() * 500) },
									{ name: '铜陵市', value: Math.round(Math.random() * 500) }
							],
                            geoCoord: {
                                '合肥市': [117.22,31.79],
								'蚌埠市': [117.33,33.03],
								'芜湖市': [118.34,31.05],
								'淮南市': [116.78,32.62],
								'铜陵市': [117.82,30.93],
								'宿州市': [117.29,33.64],
								'宣城市': [118.95,30.64],
								'亳州市': [115.76,33.80],
								'池州市': [117.47,30.37],
								'马鞍山市': [118.53,31.50],
								'淮北市': [116.70,33.78],
								'安庆市': [116.55,30.52],
								'黄山市': [118.01,29.98],
								'滁州市': [118.32,32.27],
								'阜阳市': [115.82,32.85],
								'六安市': [116.22,31.92]
                            },
							 markPoint : {
							 symbol:'emptyCircle',
        	                symbolSize: 15,       
        	                itemStyle: {
        	                    normal: {
        	                        borderColor: '#f34010',
        	                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
        	                        label: {
        	                            show: true
        	                        }
        	                    },
        	                    emphasis: {
        	                        borderColor: '#bc2e08',
        	                        borderWidth: 5,
        	                        label: {
        	                             show: true
        	                        }
        	                    }
        	                },
        	                effect : {
        	                    show: true,
        	                    shadowBlur : 0,
								loop: true
        	                },
        	                data : [
        	                   		{name:'合肥市',value:95},
									{name:'蚌埠市',value:2},
									{name:'芜湖市'},
									{name:'淮南市'},
									{name:'铜陵市'}
        	                ]
        	            }
						 
						 }
					]
				}
				myChart.setOption(option);
            }
        );
    </script>


</body></html>